A Calendar control in WPF is used to create a visual calendar in WPF through which users can pick date and raise an event on the selection of date. The XAML <Calendar /> elements is used to create a calendar control in WPF. In this demonstration I will show you how to use calendar control in WPF.
The following code snippet represents use of Calendar control in WPF
<Calendar Height="170" HorizontalAlignment="Left" Margin="149,66,0,0" Name="calendar1" VerticalAlignment="Top" Width="180" />
Width property is used to set Width of the calendar control while Height property is used to set Height of the calendar control.
Output of the following code snippet is as follows
The default view of the calendar control is show in figure. This is also known as Month view.
DisplayMode of a Calendar control
The DisplayMode property of a calendar control represents the format of display of calendar which can be month, year or decade. Month is default mode. In next to figure I will show you the year and decade mode of the calendar control.
Year view of the calendar control.
Decade view of the calendar control.
SelectionMode property in Calendar control
The SelectionMode property of Calendar control represents way in which we select dates in Calendar control. There are 4 possible values of SelectionMode property.
Property:
- None— Means no selection are allowed.
- SingleDate— Means only a single date can be selected.
- SingleRange— Means single range of date can be selected.
- MultipleRange—Means non-contiguous range of date can be selected.
The following code snippet represents the SelectionMode property to Single Range.
<Calendar Height="170" HorizontalAlignment="Left" Margin="149,66,0,0" Name="calendar1" VerticalAlignment="Top" Width="180" SelectionMode="SingleRange" />
Output of the following code snippet is as follows
BlackoutDates property in Calendar control
The Blackout Dates property in calendar control represents such types of dates which cannot be selected by users. All non selection dates are marked by cross.
The following code snippet represents use of BlackoutDates property in Calendar control
<Calendar Height="170" HorizontalAlignment="Left" Margin="149,66,0,0" Name="calendar1" VerticalAlignment="Top" Width="180" SelectionMode="SingleRange">
<Calendar.BlackoutDates>
<CalendarDateRange Start="2/1/2011" End="3/7/2011"/>
<CalendarDateRange Start="2/8/2011" End="3/8/2011"/>
</Calendar.BlackoutDates>
</Calendar>
The output of the following code snippet values are as follows
Retrieving selected date from Calendar control
The following code snippet represents that how to retrieve Current date from Calendar control
<Calendar Height="170" HorizontalAlignment="Left" Margin="150,12,0,0" Name="calendar1" VerticalAlignment="Top" Width="180" SelectionMode="SingleRange">
<Calendar.BlackoutDates>
</Calendar.BlackoutDates>
</Calendar>
<TextBlock Height="23" HorizontalAlignment="Left" Margin="103,188,0,0" x:Name="txtSelectedDate" VerticalAlignment="Top" Width="337" />
<Button Content="Display Selected Date" Height="23" HorizontalAlignment="Left" Margin="103,228,0,0" x:Name="btnSelectedDate" VerticalAlignment="Top" Width="254" Click="btnSelectedDate_Click" />
Business logic to retrieve date from Calendar control
private void btnSelectedDate_Click(object sender, RoutedEventArgs e)
{
DateTime date = (DateTime) calendar1.SelectedDate;
txtSelectedDate.Text = "Selected Date From Calendar Control : " + date.ToString();
}
Output of above code snippet is as follows
Leave Comment